<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/addmchat.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/member/css/core.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/member/css/member-info.css"/>

    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/layer/3.0.3/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/bootstrap-table/bootstrap-table.css"/>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table.js"></script>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <style type="text/css">
        .red{
            color: #FF6667;
        }
        .green{
            color: #66CC99;
        }
        .persont{
            font-size: 12px;
        }
        .layui-laydate {

            z-index: 6666666 !important;

        }
        .mgl15 .panel .panel-body {
            padding:20px;
        }
        .panel .panel-body {
            padding:0px;
        }
    </style>
    <style>
        .info-row{
            line-height: 32px;
            color: #333;
        }
        .info-row label{
            padding-left: 15px;
            padding-right: 15px;
            font-weight: 400;
        }
        .contact-card .member-info {
            padding-left: 85px;
            padding-top: 5px;
        }
        .contact-card img {
            width: 60px;
            height: 60px;
            background: #fff;
        }
        code {
            color: #5d9cec;
            background-color: #f4f8fb;
            border-radius: 4px;
        }
        .user_info {
            padding-top: 17px;
            padding-left: 17px;
            padding-right: 10px;
            background: #ffffff;
            color: #444;
        }
        .pagecount{
            text-align: center;
            margin-bottom: 5px;
            padding:15px 15px 20px 0;
        }
        .pagecount span{
            display: inline-block;
            background: #ddd;
            margin:0 0 0 5px;
            width:80px;
            text-align: center;
            padding:2px 8px 2px 8px;
            border:1px solid #eee;
            color: #666;
        }
        .pagecount span a{
            color:#333;
        }
        .pagecount span a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<section>
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li><a href="javascript:history.back();">卡券管理</a></li>
                <li class="active" style="color: #02b87f;"> 卡券统计</li>
            </ul>
        </div>
        <div class="mgl15 mgr15">
            <div class="panel panel-search panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title"><span class="glyphicon glyphicon-search pull-left" style="margin-right: 10px;"></span>条件筛选</h5>
                </div>
                <div class="panel-body">
                    <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                        <div class="col-sm-6 col-md-6 col-lg-4 " id="cid">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">门店：</label>
                                <div class="col-sm-9">
                                    <select name="mid" class="form-control" id="mach">
                                        {if condition="get_mid_num() neq '1'"}
                                        <option value="">所有门店</option>
                                        {/if}
                                        {volist name='mach' id='mid'}
                                        <option value="{$mid['merchant']}" >{$mid.merchant}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">时间：</label>
                                <div class="col-sm-9">


                                    <input name="search_date" type="text" value="{$p_data['search_date']}"
                                           readonly="readonly" id="search_date" class="form-control"
                                           placeholder="请选择" style="">

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">卡券名称：</label>
                                <div class="col-sm-9">
                                    <input type="text"  autocomplete="off" disableautocomplete class="form-control" id="merchant"  placeholder="请输入卡券名称" value="" name="title">
                                    <!--oninput="getDatas(this.value)" onkeydown="searchkeydown(event,'merchant')"-->
                                    <!--<div class="searchlist hide">-->
                                    <!--<ul>-->

                                    <!--</ul>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        核销分析
                    </h5>
                </div>
                <div class="panel-body">
                    <ul class="fenxilist clearfix">
                        <li class="col-sm-3">
                            <div>核销数</div>
                            <div id="con_sume">{$count['card_sume']}</div>
                        </li>
                        <li class="col-sm-3">
                            <div>领取数</div>
                            <div id="get_sume">{$count['get_sume']}</div>
                        </li>

                        <li class="col-sm-3">
                            <div>卡券个数</div>
                            <div id="card_sume">{$count['con_sume']}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" style="position:relative;">
                    <h5 class="panel-title">
                        卡券列表
                    </h5>

                </div>
                <div class="panel-body">
                    <table class="table table-bordered userListTable" id="tablelist">


                    </table>
                    <div id="pagination">

                    </div>
                </div>
            </div>
        </div>

        {include file='public/footer'/}

    </div>
</section>
<!--会员卡详情-->
<div class="side-bar right-bar">
    <i class="ti-close side_close_btn">
    </i>

    <div class="user_info" style="    background: #616161;">
        <div class="contact-card">
            <a class="pull-left" href="#">
                <img class="img-circle" alt id="head_imgUrl" src="">
            </a>
            <div class="member-info" style="margin-bottom: 16px;">
                <h4 class="m-t-0 m-b-5 ">
                    <b id="head_memberName"></b>

                </h4>
                <p class="text-muted">
                    <span id="head_memberMobile"></span>
                </p>

            </div>


        </div>
        <div class="btn-group text-btn right show_operator_btn" role="group">

        </div>
    </div>
    <div class="side-page-content">
        <div class="col-lg-12" style=" padding: 0px; ">
            <ul class="nav nav-tabs tabs" data-w="800" tab-w="100" style="width: 100%;" id="myTab">

                <li class="tab">
                    <a href="#member-consume" data-toggle="tab" >
                        <span class="hidden-xs">核销记录</span>
                    </a>
                </li>

                <li class="tab">
                    <a href="#member-recharge" data-toggle="tab" onclick="getcardgetlist();">
                        <span class="hidden-xs">领卡记录</span>
                    </a>
                </li>

            </ul>
            <div class="tab-content" style=" padding: 0px; margin-bottom: 0px; ">



                <div class="tab-pane fade" id="member-consume">
                    <div>
                        <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">门店：</label>
                                    <div class="col-sm-9">
                                        <select name="machname" class="form-control" id="machnamehx">
                                            {if condition="get_mid_num() neq '1'"}
                                            <option value="">所有门店</option>
                                            {/if}
                                            {volist name='mach' id='mid'}
                                            <option value="{$mid['merchant']}" >{$mid.merchant}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">时间：</label>
                                    <div class="col-sm-9">


                                        <input name="search_date" type="text" value="{$p_data['search_date']}"
                                               readonly="readonly" id="search_datehx" class="form-control"
                                               placeholder="请选择" style="">

                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-2 col-md-2 col-lg-2 ">
                                <div class="form-group">
                                    <a href="javascript:;" class="btn btn-primary"  id="searchformhx">查找</a>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div style=" margin-top: 15px; ">


                        <table class="table table table-hover m-0">
                            <thead>
                            <tr>

                                <th>卡券编号</th>
                                <th>核销人</th>
                                <th>核销时间</th>

                            </tr>
                            </thead>
                            <tbody id="kjhx">

                            </tbody>
                        </table>
                        <div id="pagecount" class="pagecount"></div>
                    </div>
                </div>
                <div class="tab-pane fade" id="member-recharge">
                    <div>
                        <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">门店：</label>
                                    <div class="col-sm-9">
                                        <select name="machname" class="form-control" id="machnamelq">
                                            {if condition="get_mid_num() neq '1'"}
                                            <option value="">所有门店</option>
                                            {/if}
                                            {volist name='mach' id='mid'}
                                            <option value="{$mid['merchant']}" >{$mid.merchant}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">时间：</label>
                                    <div class="col-sm-9">


                                        <input name="search_date" type="text" value="{$p_data['search_date']}"
                                               readonly="readonly" id="search_dateslq" class="form-control"
                                               placeholder="请选择" style="">

                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6 col-lg-4" >
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">核销状态：</label>
                                    <div class="col-sm-8">
                                        <select name="statu" class="form-control" id="statu">

                                            <option value="">请选择</option>

                                            <option value="1" >已核销</option>
                                            <option value="2" >未核销</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4"  >
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">领取状态：</label>
                                    <div class="col-sm-8">
                                        <select name="have" class="form-control" id="have">

                                            <option value="">请选择</option>

                                            <option value="1" >已领取</option>
                                            <option value="2" >未领取</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2 col-md-2 col-lg-2 ">
                                <div class="form-group">
                                    <a href="javascript:;" class="btn btn-primary" id="searchformlq">查找</a>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div style=" margin-top: 15px; ">

                        <table class="table table table-hover m-0">
                            <thead>
                            <tr>
                                <th>卡号</th>
                                <th>领取人</th>
                                <th>核销状态</th>
                                <th>领取状态</th>
                                <th>时间</th>

                            </tr>
                            </thead>
                            <tbody id="lqjl">

                            </tbody>
                        </table>
                        <div id="pagecount1" class="pagecount"></div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="sidenav-overlay absolute"></div>
</body>
<script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC_URL__/static/js/template.js"></script>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script src="/wntables.js"></script>

<script>
    function searchform() {
        $("#tablelist" ).bootstrapTable('refresh');
    }
    $(function () {
        var type = "reportcardgeneral";
        var url = "{:url()}";
        getcolumn(type, url, "tablelist")
    });
</script>
<script>
    laydate.render({
        elem: '#search_dateslq',
        type: 'datetime',
        range: true,

        change: function(value, date,endDate){ //监听日期被切换
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 30) {

                layer.alert("日期区间不能大于30天");

                $("#search_dateslq").val("");

            }
        }
    });
</script>
<script type="text/javascript">
    $(function () {


        //筛选
        function filter() {
            var ii = layer.load();
            setTimeout(function () {
                layer.close(ii);
            }, 1000);
            $("#countform").submit();

        }
        //清空筛选条件
        $(function () {
            $("#payclear").click(function () {
                $(".form-virtical input").val("");
                $(".form-virtical select").val("");
            })
        })
    })
    laydate.render({
        elem: '#search_date',
        type: 'datetime',
        range: true,
        ready: function(date){
            lay.extend( {
                hours: 23
                ,minutes: 59
                ,seconds: 59
            });
        },
        change: function(value, date,endDate){ //监听日期被切换
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 30) {

                layer.alert("日期区间不能大于30天");

                $("#search_date").val("");

            }
        }
    });
    laydate.render({
        elem: '#search_datehx',
        type: 'datetime',
        range: true,
        change: function(value, date,endDate){ //监听日期被切换
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 30) {

                layer.alert("日期区间不能大于30天");

                $("#search_datehx").val("");

            }
        }
    });

</script>
<script type="text/javascript">
    $(function () {

        $("#cardModal").on('show.bs.modal', function () {
            var id = $(event.target).data("id");
            var datas = {};
            $.ajax({
                url:"{:url('cards/getinfocards')}",
                type:"post",
                data:{
                    id:id
                },
                success:function(data){
                    $("#nick-name").text(data.nickname);
                    datas.list = data;
                    var html = template('modallist', datas);
                    $("#templateHtml").html(html);
                }
            })
        });
    });
</script>
<script>

</script>
<script>
    /*查看卡券核销记录信息*/
    function show(obj){
        var card_id=$(obj).attr("data-card");
        var sub= $(obj).attr("data-sub");
        var titl=$(obj).attr("data-title");

        $("#head_memberName").html(titl);
        $("#head_memberMobile").html(sub);
        $("#cid").attr("data-id",card_id);
        var mid=$("#machnamehx").val();
        var search_date=$("#search_date").val();

        $("#search_datehx").val(search_date);
        $("#search_dateslq").val(search_date);
        var data=$("#search_datehx").val();
        // console.log(11,data);
        //console.log(22,mid);
        var p=1;
        var page=1;
        var tr="";
        $.ajax({
            url: "{:url('cards/getcardsinfo')}",
            type: "post",
            data: {

                card_id: card_id,

            },
            success: function (data) {
                //console.log(data);
                $("#head_imgUrl").attr("src",data.logo_url);
            }
        })
        $("#kjhx").attr("data-text",p);
        $("#searchformhx").click(function(){
            data=$("#search_datehx").val();
            mid=$("#machnamehx").val();
            card_id=$("#cid").attr("data-id");
            getData(1,data,mid,card_id);
        })


        var curPage = 1; //当前页码
        var total,pageSize,totalPage; //总记录数，每页显示数，总页数
        getData(1,data,mid,card_id);
        $("#pagecount").on('click','span a',function(){
            var rel = $(this).attr("rel");
            if(rel){
                //console.log(11,rel);
                var data=$("#search_datehx").val();
                var mid=$("#machnamehx").val();
                getData(rel,data,mid,card_id);
            }
        });

        function getData(page,data,mid,card_id) {
            $.ajax({
                url:"{:url('report/getcardconlist')}",
                type:"post",
                data:{
                    search_date:data,
                    machname:mid,
                    card_id:card_id,
                    pageNum:page
                },
                success:function(data){
                    //console.log(11,data);
                    $(".right-bar").addClass("open");
                    $(".sidenav-overlay").addClass("overlay-active");
                    $('#myTab a:first').tab('show')

                    total = parseInt(data.data.count); //总记录数
                    //console.log(data.data.count);
                    totalPage = parseInt(data.pageCount); //总页数
                    pageSize = 20; //每页显示条数
                    curPage = page; //当前页
                    var text = data.data.list;
                    $('#kjhx').html("");
                    //console.log();
                    tr="";
                    if(data.code=='9001'){
                        total=0;
                        totalPage=0;
                    }
                    for (var i = 0; i < text.length; i++) {
                        //console.log(text[i].code);
                        if(text[i].title==null){

                            text[i].title="";
                            //console.log(text[i].record_bonus);
                        }
                        tr += '<tr><td>' + text[i].code + ' </td><td>' + text[i].con_username + '</td><td>' + text[i].create_time+ ' </td></tr>'

                    }

                    $('#kjhx').append(tr);
                },
                complete:function(){ //生成分页条
                    getPageBar();
                },
                error:function(){
                    alert("数据加载失败");
                }
            });
        }
        function getPageBar(){
            $("#pagecount").find('*').remove();
            //页码大于最大页数
            if(curPage>totalPage) curPage=totalPage;
            //页码小于1
            if(curPage<1) curPage=1;
            pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";

            //如果是第一页
            if(curPage==1){
                pageStr += "<span>首页</span><span>上一页</span>";
            }else{
                pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
            }

            //如果是最后页
            if(curPage>=totalPage){
                pageStr += "<span>下一页</span><span>尾页</span>";
            }else{
                pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
            }
            $("#pagecount").append(pageStr);
        }


    }

    $(".sidenav-overlay").click(function(){

        $(".right-bar").removeClass("open");
        $(".sidenav-overlay").removeClass("overlay-active");
        // location.reload();
    })
</script>
<script>
    /********领取卡券********/
    function getcardgetlist(){
        var p=1;
        var page=1;
        var tr="";
        var card_id=$("#cid").attr("data-id");
        var mid=$("#machnamelq").val();
        var data=$("#search_dateslq").val();
        var statu=$("#statu").val();
        var have=$("#have").val();
        $("#lqjl").attr("data-text",p);
        var curPage = 1; //当前页码
        var total,pageSize,totalPage; //总记录数，每页显示数，总页数
        $("#searchformlq").click(function(){
            data=$("#search_dateslq").val();
            mid=$("#machnamelq").val();
            statu=$("#statu").val();
            have=$("#have").val();
            card_id=$("#cid").attr("data-id");

            console.log(card_id);
            getData(1,data,mid,statu,have,card_id);
        })
        getData(1,data,mid,statu,have,card_id);
        $("#pagecount1").on('click','span a',function(){
            var rel = $(this).attr("rel");
            if(rel){
                getData(rel,data,mid,statu,have,card_id);
            }
        });
        function getData(page,data,mid,statu,have,card_id) {

            $.ajax({
                url:"{:url('report/getcardgetlist')}",
                type:"post",
                data:{
                    card_id:card_id,
                    machname:mid,
                    search_date:data,
                    statu:statu,
                    have:have,
                    pageNum:page
                },
                success: function (data) {
                    console.log(22,data);
                    var text = data.data.list;
                    // console.log(text);
                    total = parseInt(data.data.count); //总记录数
                    pageSize = 20; //每页显示条数
                    curPage = page; //当前页
                    totalPage = parseInt(data.pageCount); //总页数
                    $('#lqjl').html("");
                    //console.log();
                    tr="";
                    if(data.code=='9001'){
                        total=0;
                        totalPage=0;
                    }
                    for (var i = 0; i < text.length; i++) {
                        //console.log(text[i].code);
                        if(text[i].title==null){

                            text[i].title="";
                            //console.log(text[i].record_bonus);
                        }
                        tr += '<tr><td><code>' + text[i].code + '</code></td><td>' + text[i].nickname+ ' </td><td>' + text[i].statu+ ' </td><td>' + text[i].have+ ' </td><td>' + text[i].create_time+ ' </td></tr>'

                    }

                    $('#lqjl').append(tr);
                },
                complete:function(){ //生成分页条
                    getPageBar();
                },
                error:function(){
                    alert("数据加载失败");
                }
            });
        }
        function getPageBar(){
            $("#pagecount1").find('*').remove();
            //页码大于最大页数
            if(curPage>totalPage) curPage=totalPage;
            //页码小于1
            if(curPage<1) curPage=1;
            pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";

            //如果是第一页
            if(curPage==1){
                pageStr += "<span>首页</span><span>上一页</span>";
            }else{
                pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
            }

            //如果是最后页
            if(curPage>=totalPage){
                pageStr += "<span>下一页</span><span>尾页</span>";
            }else{
                pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
            }
            $("#pagecount1").append(pageStr);
        }


    }


</script>

</html>
